<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图-Geohash获取工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://webapi.amap.com/maps?v=2.0&key=dd6bbfd545d0ccad0544c837617da265"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .map-height {
                height: calc(100vh - 6rem);
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-map-marker text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">高德地图-Geohash工具</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="helpBtn" class="flex items-center text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle mr-1"></i>
                    <span class="hidden sm:inline">帮助</span>
                </button>
                <button id="resetBtn" class="flex items-center text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-refresh mr-1"></i>
                    <span class="hidden sm:inline">重置</span>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white rounded-xl card-shadow overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h2 class="font-semibold text-lg">地图区域</h2>
                <div class="flex items-center space-x-2 text-sm text-gray-500">
                    <span>当前缩放级别: <span id="zoomLevel" class="font-medium text-primary">10</span></span>
                    <span>|</span>
                    <span>最佳精度: <span id="bestPrecision" class="font-medium text-primary">5</span></span>
                </div>
            </div>
            <div id="mapContainer" class="map-height w-full"></div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-xl card-shadow p-6 scale-hover">
                <h2 class="font-semibold text-lg mb-4 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>
                    点击位置信息
                </h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">WGS84坐标</label>
                        <div class="flex items-center bg-neutral rounded-lg px-4 py-2 text-sm">
                            <span id="coordinates" class="flex-1 font-mono">未选择位置</span>
                            <button id="copyCoordBtn" class="text-gray-400 hover:text-primary transition-colors">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Geohash</label>
                        <div class="flex items-center bg-neutral rounded-lg px-4 py-2 text-sm">
                            <span id="geohash" class="flex-1 font-mono">未选择位置</span>
                            <button id="copyHashBtn" class="text-gray-400 hover:text-primary transition-colors">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 mb-1">Geohash精度</label>
                        <div class="flex items-center space-x-2">
                            <button id="decreasePrecision" class="w-8 h-8 flex items-center justify-center rounded-full bg-neutral hover:bg-gray-200 transition-colors">
                                <i class="fa fa-minus text-gray-600"></i>
                            </button>
                            <input type="number" id="precisionInput" min="1" max="12" value="5" class="w-16 text-center border border-gray-200 rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <button id="increasePrecision" class="w-8 h-8 flex items-center justify-center rounded-full bg-neutral hover:bg-gray-200 transition-colors">
                                <i class="fa fa-plus text-gray-600"></i>
                            </button>
                            <span class="text-sm text-gray-500 ml-2">手动调整精度</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl card-shadow p-6 scale-hover">
                <h2 class="font-semibold text-lg mb-4 flex items-center">
                    <i class="fa fa-cog text-primary mr-2"></i>
                    精度说明
                </h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead>
                            <tr>
                                <th class="px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    精度
                                </th>
                                <th class="px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    纬度精度
                                </th>
                                <th class="px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    经度精度
                                </th>
                                <th class="px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    近似区域大小
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">1</td>
                                <td class="px-4 py-2 whitespace-nowrap">±23°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±23°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~5,000km × 5,000km</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">2</td>
                                <td class="px-4 py-2 whitespace-nowrap">±2.8°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±5.6°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~1,250km × 625km</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">3</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.7°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.7°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~156km × 156km</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">4</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.087°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.175°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~39km × 19.5km</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap font-medium">5</td>
                                <td class="px-4 py-2 whitespace-nowrap font-medium">±0.022°</td>
                                <td class="px-4 py-2 whitespace-nowrap font-medium">±0.022°</td>
                                <td class="px-4 py-2 whitespace-nowrap font-medium">~4.8km × 4.8km</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">6</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.0027°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.0055°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~1.2km × 0.6km</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">7</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00068°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00068°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~152m × 152m</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">8</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.000085°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00017°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~38m × 19m</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">9</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.000021°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.000021°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~4.8m × 4.8m</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">10</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.0000026°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.0000052°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~1.2m × 0.6m</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">11</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00000065°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00000065°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~15cm × 15cm</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-4 py-2 whitespace-nowrap">12</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.000000081°</td>
                                <td class="px-4 py-2 whitespace-nowrap">±0.00000016°</td>
                                <td class="px-4 py-2 whitespace-nowrap">~3.8cm × 1.9cm</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <div id="helpModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto scale-hover">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h2 class="font-semibold text-xl">使用帮助</h2>
                <button id="closeHelpBtn" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <h3 class="font-medium text-lg mb-2">基本功能</h3>
                    <p class="text-gray-600 mb-3">
                        这是一个基于高德地图API的地理坐标与Geohash转换工具。您可以通过点击地图获取对应位置的WGS84经纬度坐标和Geohash编码。
                    </p>
                </div>
                <div>
                    <h3 class="font-medium text-lg mb-2">使用方法</h3>
                    <ol class="list-decimal list-inside space-y-2 text-gray-600">
                        <li>在地图上点击任意位置，右侧会显示该点的WGS84经纬度坐标和对应的Geohash编码。</li>
                        <li>地图缩放级别会自动调整Geohash的精度，也可以通过手动输入精度值来调整。</li>
                        <li>点击坐标或Geohash旁边的复制按钮，可以将对应的值复制到剪贴板。</li>
                        <li>点击右上角的"重置"按钮，可以清除当前选择的位置信息。</li>
                    </ol>
                </div>
                <div>
                    <h3 class="font-medium text-lg mb-2">Geohash精度说明</h3>
                    <p class="text-gray-600 mb-3">
                        Geohash的精度值决定了编码的长度和对应的地理区域大小。精度值越大，编码越精确，对应的地理区域越小。
                    </p>
                </div>
                <div>
                    <h3 class="font-medium text-lg mb-2">常见问题</h3>
                    <div class="space-y-3">
                        <div>
                            <h4 class="font-medium text-gray-800">为什么我看不到地图？</h4>
                            <p class="text-gray-600">请确保您已经替换了代码中的高德地图API密钥。</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">Geohash精度如何影响结果？</h4>
                            <p class="text-gray-600">精度值越小，Geohash编码越短，代表的区域越大；精度值越大，编码越长，代表的区域越精确。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4 border-t border-gray-100 bg-gray-50 flex justify-end">
                <button id="confirmHelpBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
                    我知道了
                </button>
            </div>
        </div>
    </div>

    <script>
        // 地图初始化
        let map, marker;
        let currentCoords = null;
        let currentPrecision = 5;

        // 自定义Geohash实现
        const geohash = {
            // Base32编码表
            base32: '0123456789bcdefghjkmnpqrstuvwxyz',
            
            // 经纬度转Geohash
            encode: function(latitude, longitude, precision = 12) {
                // 检查输入范围
                if (latitude < -90 || latitude > 90 || longitude < -180 || longitude > 180) {
                    throw new Error('输入的经纬度超出范围');
                }
                
                let geohash = '';
                let bits = 0;
                let bit = 0;
                let ch = 0;
                let even = true;
                
                let latInterval = [-90.0, 90.0];
                let lonInterval = [-180.0, 180.0];
                
                while (geohash.length < precision) {
                    if (even) {
                        // 处理经度
                        const mid = (lonInterval[0] + lonInterval[1]) / 2;
                        if (longitude > mid) {
                            ch |= 1 << (4 - bit);
                            lonInterval[0] = mid;
                        } else {
                            lonInterval[1] = mid;
                        }
                    } else {
                        // 处理纬度
                        const mid = (latInterval[0] + latInterval[1]) / 2;
                        if (latitude > mid) {
                            ch |= 1 << (4 - bit);
                            latInterval[0] = mid;
                        } else {
                            latInterval[1] = mid;
                        }
                    }
                    
                    even = !even;
                    
                    if (bit < 4) {
                        bit++;
                    } else {
                        geohash += this.base32[ch];
                        bits = 0;
                        bit = 0;
                        ch = 0;
                    }
                }
                
                return geohash;
            },
            
            // Geohash转经纬度范围
            decode: function(geohash) {
                let even = true;
                let latInterval = [-90.0, 90.0];
                let lonInterval = [-180.0, 180.0];
                
                for (let i = 0; i < geohash.length; i++) {
                    const c = geohash[i];
                    const cd = this.base32.indexOf(c);
                    
                    if (cd === -1) {
                        throw new Error('无效的Geohash字符: ' + c);
                    }
                    
                    for (let mask = 16; mask > 0; mask >>= 1) {
                        if (even) {
                            // 处理经度
                            if (cd & mask) {
                                lonInterval[0] = (lonInterval[0] + lonInterval[1]) / 2;
                            } else {
                                lonInterval[1] = (lonInterval[0] + lonInterval[1]) / 2;
                            }
                        } else {
                            // 处理纬度
                            if (cd & mask) {
                                latInterval[0] = (latInterval[0] + latInterval[1]) / 2;
                            } else {
                                latInterval[1] = (latInterval[0] + latInterval[1]) / 2;
                            }
                        }
                        even = !even;
                    }
                }
                
                return {
                    latitude: (latInterval[0] + latInterval[1]) / 2,
                    longitude: (lonInterval[0] + lonInterval[1]) / 2,
                    latitudeError: latInterval[1] - (latInterval[0] + latInterval[1]) / 2,
                    longitudeError: lonInterval[1] - (lonInterval[0] + lonInterval[1]) / 2
                };
            },
            
            // 获取Geohash对应的边界
            bounds: function(geohash) {
                const decoded = this.decode(geohash);
                return {
                    sw: {
                        lat: decoded.latitude - decoded.latitudeError,
                        lon: decoded.longitude - decoded.longitudeError
                    },
                    ne: {
                        lat: decoded.latitude + decoded.latitudeError,
                        lon: decoded.longitude + decoded.longitudeError
                    }
                };
            }
        };

        // GCJ-02(高德)坐标系转WGS84坐标系
        function gcj02ToWgs84(lng, lat) {
            if (outOfChina(lng, lat)) {
                return { lng, lat };
            }
            
            const d = delta(lng, lat);
            return {
                lng: lng - d.lng,
                lat: lat - d.lat
            };
        }
        
        // 判断坐标是否在中国范围内
        function outOfChina(lng, lat) {
            return (lng < 72.004 || lng > 137.8347) || 
                   (lat < 0.8293 || lat > 55.8271);
        }
        
        // 计算偏移量
        function delta(lng, lat) {
            const a = 6378245.0; // 地球长半轴
            const ee = 0.00669342162296594323; // 扁率
            
            let dLat = transformLat(lng - 105.0, lat - 35.0);
            let dLng = transformLng(lng - 105.0, lat - 35.0);
            
            const radLat = lat / 180.0 * Math.PI;
            let magic = Math.sin(radLat);
            magic = 1 - ee * magic * magic;
            const sqrtMagic = Math.sqrt(magic);
            
            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
            dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
            
            return { lat: dLat, lng: dLng };
        }
        
        // 纬度转换函数
        function transformLat(x, y) {
            let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
            ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
            return ret;
        }
        
        // 经度转换函数
        function transformLng(x, y) {
            let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
            ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
            return ret;
        }

        // 根据缩放级别自动计算最佳精度
        function getPrecisionByZoom(zoom) {
            if (zoom < 6) return 2;
            if (zoom < 8) return 3;
            if (zoom < 10) return 4;
            if (zoom < 12) return 5;
            if (zoom < 14) return 6;
            if (zoom < 16) return 7;
            if (zoom < 18) return 8;
            return 9;
        }

        // 初始化地图
        function initMap() {
            map = new AMap.Map('mapContainer', {
                zoom: 10,
                center: [116.397428, 39.90923],
                viewMode: '2D',
                lang: 'zh_cn',
                resizeEnable: true
            });

            AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
                // 添加地图控件
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.MapType());
                
                // 初始化示例数据
                // drawGeohashes(['wx4g0s', 'wx4g0u', 'wx4g0v', 'wx4g0w']);
            });

            // 监听地图点击事件
            map.on('click', function(e) {
                // 将高德坐标(GCJ-02)转换为WGS84坐标
                const wgs84Coords = gcj02ToWgs84(e.lnglat.getLng(), e.lnglat.getLat());
                updateMarkerAndInfo(wgs84Coords.lng, wgs84Coords.lat);
            });

            // 监听地图缩放变化
            map.on('zoomchange', function() {
                const zoom = map.getZoom();
                document.getElementById('zoomLevel').textContent = zoom.toFixed(1);
                
                // 根据新的缩放级别计算最佳精度
                const bestPrecision = getPrecisionByZoom(zoom);
                document.getElementById('bestPrecision').textContent = bestPrecision;
                
                // 如果用户没有手动调整精度，则使用最佳精度
                if (currentCoords) {
                    currentPrecision = bestPrecision;
                    document.getElementById('precisionInput').value = bestPrecision;
                    updateGeohash();
                }
            });
        }

        // 更新标记和信息
        function updateMarkerAndInfo(lng, lat) {
            currentCoords = { lng, lat };
            
            // 更新坐标显示
            const formattedCoords = `${lng.toFixed(6)}, ${lat.toFixed(6)}`;
            document.getElementById('coordinates').textContent = formattedCoords;
            
            // 更新精度输入框
            const bestPrecision = getPrecisionByZoom(map.getZoom());
            currentPrecision = bestPrecision;
            document.getElementById('precisionInput').value = bestPrecision;
            
            // 更新Geohash
            updateGeohash();
            
            // 更新地图标记（注意：地图使用GCJ-02坐标，所以需要转换回GCJ-02）
            const gcj02Coords = wgs84ToGcj02(lng, lat);
            if (marker) {
                marker.setPosition([gcj02Coords.lng, gcj02Coords.lat]);
            } else {
                marker = new AMap.Marker({
                    position: [gcj02Coords.lng, gcj02Coords.lat],
                    title: '点击位置',
                    draggable: true,
                    cursor: 'move',
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
                });
                
                // 添加标记拖动事件监听
                marker.on('dragend', function(e) {
                    // 将GCJ-02坐标转换为WGS84
                    const pos = e.lnglat;
                    const wgs84Pos = gcj02ToWgs84(pos.getLng(), pos.getLat());
                    currentCoords = { lng: wgs84Pos.lng, lat: wgs84Pos.lat };
                    const formattedCoords = `${wgs84Pos.lng.toFixed(6)}, ${wgs84Pos.lat.toFixed(6)}`;
                    document.getElementById('coordinates').textContent = formattedCoords;
                    updateGeohash();
                });
                
                map.add(marker);
            }
            
            // 地图居中
            map.setCenter([gcj02Coords.lng, gcj02Coords.lat]);
        }

        // WGS84转GCJ-02
        function wgs84ToGcj02(lng, lat) {
            if (outOfChina(lng, lat)) {
                return { lng, lat };
            }
            
            const d = delta(lng, lat);
            return {
                lng: lng + d.lng,
                lat: lat + d.lat
            };
        }

        // 更新Geohash
        function updateGeohash() {
            if (!currentCoords) return;
            
            try {
                // 使用自定义算法计算Geohash
                const geohashValue = geohash.encode(currentCoords.lat, currentCoords.lng, currentPrecision);
                document.getElementById('geohash').textContent = geohashValue;
                
                // 显示Geohash对应的区域
                showGeohashBounds(geohashValue);
            } catch (error) {
                console.error('计算Geohash出错:', error);
                document.getElementById('geohash').textContent = '计算出错';
            }
        }

        // 显示Geohash对应的区域
        function showGeohashBounds(geohashValue) {
            // 移除之前的覆盖物
            map.remove(map.getAllOverlays('polygon'));
            
            // 获取Geohash对应的边界
            const bounds = geohash.bounds(geohashValue);
            const sw = [bounds.sw.lon, bounds.sw.lat];
            const ne = [bounds.ne.lon, bounds.ne.lat];
            
            // 创建矩形覆盖物
            const rectangle = new AMap.Rectangle({
                bounds: new AMap.Bounds(sw, ne),
                strokeColor: '#165DFF',
                strokeWeight: 2,
                strokeOpacity: 0.8,
                fillColor: '#165DFF',
                fillOpacity: 0.2,
                zIndex: 50
            });
            
            map.add(rectangle);
        }

        // 复制到剪贴板
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    // 显示复制成功提示
                    const notification = document.createElement('div');
                    notification.className = 'fixed bottom-4 right-4 bg-dark text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-0';
                    notification.textContent = '复制成功';
                    document.body.appendChild(notification);
                    
                    // 3秒后隐藏提示
                    setTimeout(() => {
                        notification.classList.add('opacity-0', 'translate-y-4');
                        setTimeout(() => {
                            document.body.removeChild(notification);
                        }, 300);
                    }, 2000);
                })
                .catch(err => {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制');
                });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化地图
            initMap();
            
            // 精度调整事件
            document.getElementById('decreasePrecision').addEventListener('click', function() {
                const input = document.getElementById('precisionInput');
                if (input.value > 1) {
                    input.value = parseInt(input.value) - 1;
                    currentPrecision = parseInt(input.value);
                    updateGeohash();
                }
            });
            
            document.getElementById('increasePrecision').addEventListener('click', function() {
                const input = document.getElementById('precisionInput');
                if (input.value < 12) {
                    input.value = parseInt(input.value) + 1;
                    currentPrecision = parseInt(input.value);
                    updateGeohash();
                }
            });
            
            document.getElementById('precisionInput').addEventListener('change', function() {
                let value = parseInt(this.value);
                value = Math.max(1, Math.min(12, value));
                this.value = value;
                currentPrecision = value;
                updateGeohash();
            });
            
            // 复制按钮事件
            document.getElementById('copyCoordBtn').addEventListener('click', function() {
                const coords = document.getElementById('coordinates').textContent;
                if (coords !== '未选择位置') {
                    copyToClipboard(coords);
                }
            });
            
            document.getElementById('copyHashBtn').addEventListener('click', function() {
                const geohash = document.getElementById('geohash').textContent;
                if (geohash !== '未选择位置') {
                    copyToClipboard(geohash);
                }
            });
            
            // 重置按钮事件
            document.getElementById('resetBtn').addEventListener('click', function() {
                currentCoords = null;
                document.getElementById('coordinates').textContent = '未选择位置';
                document.getElementById('geohash').textContent = '未选择位置';
                
                if (marker) {
                    map.remove(marker);
                    marker = null;
                }
                
                // 移除Geohash区域
                map.remove(map.getAllOverlays('polygon'));
            });
            
            // 帮助模态框
            const helpModal = document.getElementById('helpModal');
            document.getElementById('helpBtn').addEventListener('click', function() {
                helpModal.classList.remove('hidden');
            });
            
            document.getElementById('closeHelpBtn').addEventListener('click', function() {
                helpModal.classList.add('hidden');
            });
            
            document.getElementById('confirmHelpBtn').addEventListener('click', function() {
                helpModal.classList.add('hidden');
            });
            
            // 点击模态框外部关闭
            helpModal.addEventListener('click', function(e) {
                if (e.target === helpModal) {
                    helpModal.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>    